<template>

	<scroll-view :scroll-x="true" style="white-space: nowrap;">
		<view v-if="list.length>0" class="flex-col section_2">
			<view class="flex-row">
				<view class="flex-row equal-division">
					<template v-for="(item,index) in list ">
						<view class="flex-col items-start equal-division-item" v-if="((index+1) % 2)==1" :key="index">
							<view class="flex-col items-center  " :class="index==0?'group_27':'section_3'">
								<text class="text_24">{{item.constructionPlanName}}</text>
								<text class="text_26 text_31">{{item.planDuration}}个工作日</text>
							</view>
							<text class="text_28 text_32">结束时间{{item.planEndTime}}</text>
						</view>

					</template>


				</view>

			</view>
			<view class="flex-row group_29">
				<view class="flex-col group_30">
					<view class="justify-evenly group_31">
							<template v-for="(item,index) in list ">
						<view class="flex-col group_32" :key="index">
							<view class="flex-col items-start ">
								<view  :class="index==0?'section_6':'section_6'">
									<!--*-->
								</view>
							</view>
							<view class="flex-col items-center " :class="index==0?'text-wrapper_2':'text-wrapper_3'"><text class="text_34">{{item.completionSchedule}}%</text></view>
						</view>
					
						
							</template>
			
					</view>
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868235354870924.png"
						class="image_8" />
				</view>
				<view class="section_8">
					<!--*-->
				</view>
			</view>
			<view class="flex-row equal-division_1">
				<template v-for="(item,index) in list ">
					<view class="flex-col items-end equal-division-item_1" v-if="((index+1) % 2)==0" :key="index">
						<text class="text_38">结束时间{{item.planEndTime}}</text>
						<view class="flex-col items-center section_9 view_6">
							<text class="text_40">{{item.constructionPlanName}}</text>
							<text class="text_41 text_42">{{item.planDuration}}个工作日</text>
						</view>
					</view>
				</template>



			</view>
		</view>


	</scroll-view>

</template>

<script>
	export default {
		name: "shop-project",
		props: {
			list: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.section_2 {
		margin-top: 47.5rpx;

		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868235464239978.png');
		background-position: 8.5% 0%;
		background-size: 24% 26%;
		background-repeat: no-repeat;
		height: 359.5rpx;
	}

	.equal-division {
		flex: 1 1 auto;
	}

	.equal-division-item {
		flex: 1 1 266rpx;
		padding: 3rpx 32.5rpx 10rpx;
	}

	.group_26 {
		padding: 0 31rpx;
		align-self: stretch;
	}

	.text_42 {
		color: #f6f7f9;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_40 {
		color: #f6f7f9;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_35 {
		margin-left: 54rpx;
	}

	.text_27 {
		margin-left: 8rpx;
		margin-top: 5rpx;
	}

	.text_24 {
		color: #ffffff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_26 {
		color: #ffffff;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_28 {
		color: #666666;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_29 {
		margin-top: 41.5rpx;
	}

	.group_27 {
		margin-left: 37rpx;
		margin-bottom: 34rpx;
	}

	.section_3 {
		margin-left: 10rpx;
		padding: 6rpx 0 25rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868235494861150.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 156rpx;
	}

	.text_31 {
		margin-top: 5rpx;
	}

	.text_32 {
		margin-top: 16.5rpx;
	}

	.image_7 {
		margin-left: 10rpx;
		width: 10rpx;
		height: 92rpx;
	}

	.text_33 {
		margin-top: 16.5rpx;
		color: #666666;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.group_29 {
		margin-top: 4.5rpx;
	}

	.group_30 {
		flex: 1 1 auto;
	}

	.group_31 {
		margin-top: 27rpx;
	}

	.group_32 {
		padding: 8rpx 0;
		width: 200rpx;
		position: relative;
	}

	.section_4 {
		background-image: linear-gradient(90deg, #9ae8fd66 0%, #9ae8fd66 1.59%, #12c1f066 90.4%, #12c1f066 100%);
		width: 200rpx;
	}

	.section_5 {
		background-image: linear-gradient(90deg, #9ae8fd 0%, #9ae8fd 1.59%, #12c1f0 90.4%, #12c1f0 100%);
		width: 100rpx;
		height: 8rpx;
	}

	.section_6 {
		background-image: linear-gradient(90deg, #69e3c066 0%, #69e3c066 2.31%, #0bc89266 93.64%, #0bc89266 100%);
		width: 200rpx;
		height: 8rpx;
	}

	.section_7 {
		background-image: linear-gradient(90deg, #ffc17466 0%, #ffc17466 2.31%, #ff9d2366 93.64%, #ff9d2366 100%);
		width: 150rpx;
		height: 8rpx;
	}

	.text-wrapper_2 {
		padding: 3rpx 0;
		background-color: #09c7f4;
		box-shadow: 0px 0px 8rpx 0px #0cc7f44d;
		border-radius: 12rpx;
		width: 44rpx;
		position: absolute;
		right: 56rpx;
		top: 0;
	}

	.text_34 {
		color: #ffffff;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
	}

	.text-wrapper_3 {
		padding: 3rpx 0;
		background-color: #cccccc;
		border-radius: 12rpx;
		width: 44rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.group_33 {
		padding: 8rpx 0;
		width: 150rpx;
		position: relative;
	}

	.text_37 {
		color: #ffffff;
		font-size: 16rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 18rpx;
	}


	.image_8 {
		margin-left: 214rpx;
		margin-top: -51rpx;
		flex-shrink: 0;
		align-self: flex-start;
		width: 24rpx;
		height: 32rpx;
	}

	.section_8 {
		margin-right: -48rpx;
		margin-top: 35rpx;
		flex-shrink: 0;
		background-image: linear-gradient(90.7deg, #a3c3ff66 0%, #a3c3ff66 -7.71%, #1d6aff66 61.14%, #1d6aff66 100%);
		width: 152rpx;
		height: 8rpx;
	}

	.equal-division_1 {
		margin-top: 20.5rpx;

	}

	.equal-division-item_1 {
		flex: 1 1 274rpx;
		padding: 10rpx 26rpx;
		width: 274rpx;
	}

	.text_38 {
		color: #666666;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.section_9 {
		margin-top: 16.5rpx;
	}

	.view_6 {
		padding: 19rpx 0 12rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868236287266105.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 156rpx;
	}

	.view_7 {
		padding: 19rpx 0 12rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868236300071791.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 156rpx;
	}

	.text_41 {
		margin-top: 5rpx;
	}

	.text_44 {
		color: #ffffff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_45 {
		color: #ffffff;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}
</style>
